<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生课题管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师申报课题</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card>
      <el-button type="primary" size="small" @click="showAddDialog">申报课题</el-button>
      <span v-if="deadline.subjectDeclare" style="margin:50px 100px;color:red;font-size:20px; font-weight:bold">
        课题申报截止时间: {{$moment(deadline.subjectDeclare).format('YYYY-MM-DD HH:mm:ss')}}</span>
      <!--表格区域-->
      <el-table :data="subjectList" stripe>
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="课题题目" prop="name" width="400"></el-table-column>
        <el-table-column align="center" label="课题类型" width="120">
          <template slot-scope="scope"> 
            <el-tag type="info">{{scope.row.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" prop="source.label" width="120">
          <template slot-scope="scope"> 
            <el-tag>{{scope.row.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报时间" prop="declareTime">
          <template slot-scope="scope"> 
            <span>{{$moment(scope.row.declareTime).format('YYYY-MM-DD')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申报状态">
          <template slot-scope="scope">
            <el-tag effect="dark" :type="statusObj[scope.row.status].type">{{statusObj[scope.row.status].label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope" >
            <div v-if="scope.row.status === 1">
              <el-button type="success" circle icon="el-icon-edit"  @click="showEditDialog(scope.row)"></el-button> 
              <el-button type="danger" circle icon="el-icon-delete"  @click="cancelDeclare(scope.row.id)"></el-button> 
            </div>
            <div v-else>
              <el-button type="info" circle icon="el-icon-view"  @click="showViewDialog(scope.row)"></el-button> 
              <el-popover placement="top" width="250px" trigger="click" :content="scope.row.checkAdvice" style="margin:0 10px">
              <el-button slot="reference" type="success" circle icon="el-icon-check"></el-button>
            </el-popover> 
            </div> 
          </template> 
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>

    <!--申报课题的对话框-->
    <el-dialog title="申报课题" :visible.sync="addDialogVisible" @close="addForm = {}">
      <!--主体内容区域-->
      <el-form :model="addForm" :rules="formRules" ref="addFormRef" label-width="80px" style="width:600px;margin:0 110px">
        <el-form-item prop="name" label="课题名称">
          <el-input v-model="addForm.name" placeholder="请输入课题名称"></el-input>
        </el-form-item>
        <el-form-item prop="typeId" label="课题类型">
          <el-select value-key="id" v-model="addForm.typeId" placeholder="请选择课题类型">
            <el-option v-for="type in typeList" :key="type.id" :value="type.id" :label="type.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="sourceId" label="课题来源">
          <el-select value-key="id" v-model="addForm.sourceId" placeholder="请选择课题来源">
            <el-option v-for="source in sourceList" :key="source.id" :value="source.id" :label="source.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="课题简介">
          <el-input v-model="addForm.introduce" placeholder="请输入课题简介" type="textarea" style="width:60%"  :rows="5"></el-input>
        </el-form-item>
        <el-row style="margin-left:25%;margin-top:40px">
          <el-button @click.native="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click.native="teacherAddSubject('addFormRef')">确 定</el-button>
        </el-row>
      </el-form> 
    </el-dialog>

    <!--修改课题的对话框-->
    <el-dialog :title="dialogTitle" :visible.sync="editDialogVisible">
      <!--主体内容区域-->
      <el-form :model="editForm" :rules="formRules" ref="editFormRef" label-width="80px" style="width:600px;margin:0 110px">
        <el-form-item prop="name" label="课题名称">
          <el-input v-model="editForm.name" placeholder="请输入课题名称" :readonly="viewOnly"></el-input>
        </el-form-item>
        <el-form-item prop="typeId" label="课题类型">
          <el-select value-key="id" v-model="editForm.typeId" placeholder="请选择课题类型">
            <el-option v-for="type in typeList" :key="type.id" :value="type.id" :label="type.label" :disabled="viewOnly"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="sourceId" label="课题来源">
          <el-select value-key="id" v-model="editForm.sourceId" placeholder="请选择课题来源">
            <el-option v-for="source in sourceList" :key="source.id" :value="source.id" :label="source.label" :disabled="viewOnly"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="introduce" label="课题简介" >
          <el-input :readonly="viewOnly" v-model="editForm.introduce" placeholder="请输入课题简介" type="textarea" style="width:60%" :rows="5"></el-input>
        </el-form-item>
        <el-row style="margin-left:25%;margin-top:40px" v-if="!viewOnly">
          <el-button @click.native="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.native="teacherEditSubject('editFormRef')">确 定</el-button>
        </el-row>
      </el-form> 
    </el-dialog>
  </div>
</template>

<script>
  import {getTeacherSubjectListByPage, teacherUpdateSubject, teacherCancelDeclareBySubId} from '../../axios/subject' 
  import {getSubjectTypeList, getSubjectSourceList,getTeacherSubjectTotal,teacherDeclareSubject} from '../../axios/subject' 
  import {compareDate} from '../../js/time'
  import {userGetDeadline} from '../../axios/time'
  export default {
    name: 'TeacherSubjectDeclare',
    data(){
      return { 
        deadline:{},
        dialogTitle: '',
        viewOnly: false,
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1,
        subjectList: [],// 教师申报课题列表 
        typeList: [], // 课题类型列表 
        sourceList: [], // 课题来源列表 
        addDialogVisible: false, // 添加对话框的显示/隐藏 
        editDialogVisible: false,  // 编辑对话框的显示/隐藏 
        addForm: {}, // 申报课题表单
        // 修改课题表单
        editForm: {
          source:{},
          type:{}
        },
        // 表单规则
        formRules: {
          name: [ { required: true, message: '请输入课题名称', trigger: 'blur' } ],
          typeId: [ { required: true, message: '请选择课题类型', trigger: 'change' } ],
          sourceId: [  { required: true, message: '请选择课题来源', trigger: 'change' } ],
          introduce: [  { required: true, message: '请输入课题简介', trigger: 'blur' } ]
        },
        statusObj: {
          1: { type: 'warning', label: '待审核' },
          2: { type: 'danger', label: '未通过' },
          3: { type: 'success', label: '已通过' },
          4: { type: 'info',  label: '已被选' }
        }
      }
    },
    methods:{
      getSourceListAndTypeList(){
        // 获取课题类型列表
        getSubjectTypeList().then(res => {
          if (res.success){
             this.typeList = res.data
          } 
        }) 
        // 课题来源列表
        getSubjectSourceList().then(res => {
          if (res.success){
            this.sourceList = res.data
          } 
        })  
      },
      getSubjectTotal(){
        // 获取教师课题总数
        getTeacherSubjectTotal().then(res => {
          if(res.success){
            this.total = res.data
          }
        }) 
      },
      getSubjectList(){
        // 获取指定页码的教室课题列表
        getTeacherSubjectListByPage(this.pageParam).then(res => {
          if(res.success){ 
            this.subjectList = res.data
          } 
        })   
      },
      // 页码改变时，及时更新数据
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getSubjectList()  
      },
      // 展示申报课题对话框
      showAddDialog(){
        if(this.deadline.subjectDeclare !== null){
          if(!compareDate(this.deadline.subjectDeclare)){
            this.$message.error('课题申报已截止!')
            return ;
          }
        }  
        this.addDialogVisible = true 
      },
      showViewDialog(subject){
        this.dialogTitle = '查看课题'
        this.viewOnly = true
        this.editForm = subject
        this.editDialogVisible = true 
      },
      // 展示编辑课题模态框
      showEditDialog(subject){ 
        this.dialogTitle = '编辑课题'
        this.viewOnly = false
        this.editForm = subject
        this.editDialogVisible = true  
      },
      cancelDeclare(subId){
        teacherCancelDeclareBySubId(subId).then(res => {
          if(res.success){
            this.$message.success('取消申报成功!')
            this.getSubjectList()
            this.getSubjectTotal()
          }
        })
      },
      // 教师申报课题提交
      teacherAddSubject(addFormRef){
        this.$refs[addFormRef].validate(valid => {
          if(valid){
            // 验证成功，发送后端请求 
            console.log(this.addForm)
            teacherDeclareSubject(this.addForm).then(res => {
              if(res.success){ 
                this.$message.success('申报课题成功')
                this.addDialogVisible = false
                this.getSubjectList()
                this.getSubjectTotal()
              } 
            })  
          }else{
            this.$message.error('请按要求填写各项信息') 
          }
        })
      },
      // 教师修改课题
      teacherEditSubject(editFormRef){
        this.$refs[editFormRef].validate(valid => {
          if(valid){
            // 验证成功，发送更新请求
            teacherUpdateSubject(this.editForm).then(res => {
              if(res.success){
                this.$message.success('修改课题成功')
                this.editDialogVisible = false
                this.getSubjectList()
              } 
            })  
          }else{
            this.$message.error('请按要求填写各项信息') 
          }
        })
      }
    },
    created(){
      this.getSubjectList()
      this.getSubjectTotal()
      this.getSourceListAndTypeList()
      userGetDeadline().then(res => {
        if(res.success){
          this.deadline = res.data
        }
      })
    }
  }
</script>

<style scoped>
  .el-form-item .el-input{
    width: 60%;
  }

</style>